<template>
    <div class="home">
        <div class="img_bg">
            <LazyImg ref='load' :src="bgImg"></LazyImg>
        </div>
        <div class="index_box_top"></div>
        <div class="index_desc">NO.1<br>Biker Dating Site<br>For Motorcycle Singles<br></div>
        <div class="index_box_bottom">
            <router-link :to="{ name: 'registerOne' }">
                <button type="button" class="btn btn-blue joinus"> Register Now </button>
            </router-link>
            <router-link :to="{ name: 'login' }">
                <button type="button" class="btn btn-nocolor signin main_color"> Log in </button>
            </router-link>
            <div class="index_full" @click="gotoFullSite()"> VIEW FULL WEBSITE </div>
            <div class="siteinfo"> {{language.about_copyrightYear}} {{language.unify_versionName}}</div>
        </div>
        <div class="pageBlock" v-if="!isMobile">
            <p>You can utilize this site more efficiently on your mobile devices!</p>
        </div>
    </div>
</template>

<script>

import componentsHome from '../../common/components/home'

export default {
    name: 'home',
    extends: componentsHome,
    data(){
        return {
            bgImg:require('../assets/loading_hd.jpg'),
        }
    }
}

</script>

<style scoped>
.home .img_bg {
    background-image: url(./../assets/loading.jpg);
}

.home .index_box_top {
    margin-top: 30px;
    background-image: url(./../assets/logo.png);
}

@media screen and (orientation:landscape) {
    .home .img_bg {
        background-image: url(./../assets/ipad_loading.jpg);
    }
}

</style>
